<template>
  <div class="message-item" :class="{ 'my-message': message.isMyselfMsg }">
    <!-- 对方消息 -->
    <div v-if="!message.isMyselfMsg" class="word" :data-message-id="message.id">
      <div @click="handleAvatarClick">
        <img :src="message.receiveAvatar" />
      </div>
      <div class="info">
        <div class="info-content">
          <!-- 引用消息 -->
          <QuoteMessage 
            v-if="message.messageType === MESSAGE_TYPES.QUOTE"
            :message="message"
            :default-avatar="defaultAvatar"
          />
          
          <!-- 消息操作菜单 -->
          <MessageActions
            v-if="showMessageActions"
            :message="message"
            :is-my-message="false"
            @command="handleCommand"
            @get-content="handleGetContent"
            @dropdown-close="handleDropdownClose"
          />
          
          <!-- 消息内容 -->
          <MessageContent
            :message="message"
            :playing-voice-id="playingVoiceId"
            @play-voice="handlePlayVoice"
            @download-file="handleDownloadFile"
            @open-app-link="handleOpenAppLink"
          />
        </div>
      </div>
    </div>
    
    <!-- 我的消息 -->
    <div v-else class="word-my" :data-message-id="message.id">
      <div class="info">
        <div class="info-content">
          <!-- 引用消息 -->
          <QuoteMessage 
            v-if="message.messageType === MESSAGE_TYPES.QUOTE"
            :message="message"
            :default-avatar="defaultAvatar"
            :is-my-message="true"
          />
          
          <!-- 消息操作菜单 -->
          <MessageActions
            v-if="showMessageActions"
            :message="message"
            :is-my-message="true"
            @command="handleCommand"
            @get-content="handleGetContent"
            @dropdown-close="handleDropdownClose"
          />
          
          <!-- 发送状态和已读状态 -->
          <div v-if="message.sendStatus !== 1" class="message-error">
            <span class="el-icon-warning abnormal" @click.prevent="handleResend"></span>
          </div>
          
          <!-- 已读状态提示 -->
          <div
            v-if="message.sendStatus === 1 && message.messageType === 0"
            class="messageRead"
            :class="{ read: message.isRead === 1 }"
          >
            {{ message.isRead === 1 ? "已读" : "未读" }}
          </div>
          
          <!-- 消息内容 -->
          <MessageContent
            :message="message"
            :playing-voice-id="playingVoiceId"
            @play-voice="handlePlayVoice"
            @download-file="handleDownloadFile"
            @open-app-link="handleOpenAppLink"
          />
        </div>
      </div>
      <img :src="message.senderAvatar" />
    </div>
    
    <!-- 发送失败提示 -->
    <div v-if="message.sendStatus === 0 && message.isMyselfMsg" class="message-send-fail">
      <p class="center-text-gray">
        不支持临时会话，请先添加他（她）
        <span @click.prevent="handleSendFriendCheck" class="link-blue">发送朋友验证</span>
      </p>
    </div>
    <div v-else-if="message.sendStatus === 2 && message.isMyselfMsg" class="message-send-fail-2">
      <p class="center-text-gray">
        你还不是他（她）的朋友。请先发送朋友验证请求，对方验证通过后，才能聊天。
        <span @click.prevent="handleSendFriendCheck" class="link-blue">发送朋友验证</span>
      </p>
    </div>
    <div v-else-if="message.sendStatus === 3 && message.isMyselfMsg" class="message-send-fail-3">
      <p class="center-text-gray">消息已发出，但被对方拒收了</p>
    </div>
    
    <!-- 撤回消息 -->
    <div v-if="message.isRetracted" class="retracted-message">
      <div v-if="!message.isMyselfMsg">
        <p class="text-gray-small">
          <span>对方撤回了一条消息</span>
        </p>
      </div>
      <div v-else>
        <p class="text-gray-small">
          <span>你撤回了一条消息</span>&nbsp;
          <span
            class="link-gray"
            @click.prevent="handleEdit"
            v-if="canEdit"
          >重新编辑</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import QuoteMessage from './QuoteMessage.vue';
import MessageActions from './MessageActions.vue';
import MessageContent from './MessageContent.vue';
import { MESSAGE_TYPES } from '@/constants/messageTypes';
import { timeUtils } from '@/utils/common';
import messageMixin from '@/mixins/messageMixin';

export default {
  name: 'MessageItem',
  mixins: [messageMixin],
  components: {
    QuoteMessage,
    MessageActions,
    MessageContent
  },
  props: {
    message: {
      type: Object,
      required: true
    },
    messageHandlerFlag: {
      type: [String, Number],
      default: null
    },
    playingVoiceId: {
      type: [String, Number],
      default: null
    },
    defaultAvatar: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      MESSAGE_TYPES
    };
  },
  computed: {
    showMessageActions() {
      return this.messageHandlerFlag === this.message.id &&
        (this.message.messageType === MESSAGE_TYPES.TEXT ||
         this.message.messageType === MESSAGE_TYPES.IMAGE ||
         this.message.messageType === MESSAGE_TYPES.QUOTE);
    },
    canEdit() {
      return this.canEditMessage(this.message);
    }
  },
  methods: {
    // 头像点击
    handleAvatarClick() {
      this.$emit('avatar-click', this.message);
    },
    
    // 消息操作
    handleCommand(command, message) {
      this.$emit('command', command, message);
    },
    
    // 获取内容
    handleGetContent(content) {
      this.$emit('get-content', content);
    },
    
    // 下拉菜单关闭
    handleDropdownClose(event) {
      this.$emit('dropdown-close', event);
    },
    
    // 播放语音
    handlePlayVoice(voiceUrl, msgId) {
      this.$emit('play-voice', voiceUrl, msgId);
    },
    
    // 下载文件
    handleDownloadFile(fileUrl, fileName) {
      this.$emit('download-file', fileUrl, fileName);
    },
    
    // 打开应用链接
    handleOpenAppLink(url) {
      this.$emit('open-app-link', url);
    },
    
    // 重新发送
    handleResend() {
      this.$emit('resend', this.message);
    },
    
    // 发送好友验证
    handleSendFriendCheck() {
      this.$emit('send-friend-check');
    },
    
    // 编辑消息
    handleEdit() {
      this.$emit('edit', this.message.content);
    },
    
    // 比较时间（判断是否可以撤回/编辑）- 现在使用 mixin 中的方法
    compareTime(date) {
      return timeUtils.compareTime(date);
    }
  }
};
</script>

<style scoped>
.message-item {
  margin-bottom: 20px;
}

.word {
  display: flex;
  margin-bottom: 20px;
}

.word img {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.word .info {
  position: relative;
  margin-left: 10px;
  width: 90%;
  text-align: left;
}

.word .info-content {
  padding: 10px;
  border-radius: 3px;
  font-size: 14px;
  max-width: 40%;
  background: #fff;
  float: left;
  position: relative;
  word-wrap: break-word;
  margin-top: 8px;
}

.word .info-content::before {
  position: absolute;
  left: -8px;
  top: 8px;
  content: "";
  border-right: 10px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.word .info-content:hover::before {
  border-right: #f0f0f0;
}

.word .info-content:hover {
  background-color: #f0f0f0;
}

.word-my {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.word-my img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.word-my .info {
  width: 90%;
  margin-left: 10px;
  text-align: right;
}

.word-my .info-content {
  max-width: 40%;
  padding: 10px;
  border-radius: 3px;
  font-size: 14px;
  position: relative;
  float: right;
  margin-right: 10px;
  word-wrap: break-word;
  margin-top: 8px;
  background: #a3c3f6;
  min-height: 1em;
  text-align: left;
}

.word-my .info-content::after {
  position: absolute;
  right: -8px;
  top: 8px;
  content: "";
  border-left: 10px solid #a3c3f6;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.word-my .info-content:hover {
  background-color: #99b7e7;
}

.message-error {
  position: absolute;
  left: -20px;
  bottom: 0;
  font-size: 15px;
  color: #ff004f;
}

.abnormal {
  cursor: pointer;
}

.messageRead {
  position: absolute;
  left: -34px;
  bottom: 0;
  cursor: pointer;
  padding: 1px 3px 0 3px;
  border-radius: 5px;
  color: #797979;
  font-size: 12px;
}

.messageRead.read {
  color: #1890ff;
  font-weight: 500;
}

.message-send-fail {
  background-color: #e9e9e9;
  width: 220px;
  border-radius: 3px;
  margin: 0 auto;
  padding: 10px;
}

.message-send-fail-2 {
  background-color: #e9e9e9;
  width: 410px;
  border-radius: 3px;
  margin: 0 auto;
  padding: 10px;
}

.message-send-fail-3 {
  background-color: #e9e9e9;
  width: 170px;
  border-radius: 3px;
  margin: 0 auto;
  padding: 10px;
}

.retracted-message {
  text-align: center;
  background-color: #e9e9e9;
  width: 190px;
  border-radius: 3px;
  margin: 10px auto;
  padding: 5px;
}

.center-text-gray {
  text-align: center;
  font-size: 13px;
  color: #828282;
}

.text-gray-small {
  font-size: 13px;
  color: #828282;
}

.link-blue {
  color: #409eff;
  cursor: pointer;
}

.link-gray {
  color: #999999;
  cursor: pointer;
}
</style>